﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" Inherits="Pages_Reservations_ServiceCalendar" Codebehind="ServiceCalendar.aspx.cs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="Server">
    Operator Calendar
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="using" runat="Server">

    <script type="text/html" id="TemplateResultsTable">    
    {#template MAIN}
    <table id="gridCalendar" cellpadding="5" cellspacing="0" class="grid">
      <thead>
        <th>#</th>
        <th>Boat</th>
        <th>Booking #</th>
        <th><label id="firstDay"></label></th>
        <th><label id="secondDay"></label></th>
        <th><label id="thirdDay"></label></th>
        <th><label id="fourthDay"></label></th>
        <th><label id="fifthDay"></label></th>
        <th><label id="sixthDay"></label></th>
        <th><label id="seventhDay"></label></th>
      </thead>
      <tbody>
      {#foreach $T.result as reservation}
      <tr class="{#cycle values=['','evenRow']}">
          <td align="center">{$T.reservation$index + 1}</td>
          {#include ROW root=$T.reservation}
      </tr>
      {#/for}
      </tbody>
      <tfoot>
      <th colspan="10" ></th>
        </tfoot>
    </table>
    {#/template MAIN}

    {#template ROW}     
      <td>{$T.Boat}</td>
      <td><a href="/Pages/Reservations/ReservationEdit.aspx?ReservationID={$T.ReservationID}">{$T.BookingCode}</td>
      <td>
      {#if $T.Service1 != null}
      {#foreach $T.Service1 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service2 != null}
      {#foreach $T.Service2 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service3 != null}
      {#foreach $T.Service3 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service4 != null}
      {#foreach $T.Service4 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service5 != null }
      {#foreach $T.Service5 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service6 != null }
      {#foreach $T.Service6 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
      <td>
      {#if $T.Service7 != null }
      {#foreach $T.Service7 as service}
          <div class="servicecalendar">{$T.service.Program}</div>
          <div style="color: blue">({$T.service.StatusString})</div>
      {#/for}
      {#/if}
      </td>
    {#/template ROW}
    
    </script>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="header" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="Server">
    <div style="margin: 10px 3px 0 3px">
        <!-- Title -->
        <h1 style="text-indent: 10px">
            View service calendar</h1>
        <table style="margin: 15px;">
            <tr>
                <%-- Depature date --%>
                <td>
                    <div class="item">
                        <div class="label">
                            Departure Date</div>
                        <div class="field">
                            <asp:TextBox ID="txtDepartureDate" runat="server" CssClass="datepicker"></asp:TextBox></div>
                    </div>
                </td>
                <%-- Button Find --%>
                <td>
                    <a id="btnBack" title="Back" class="button"><span>&laquo;</span></a> <a id="btnFind"
                        title="Search button" class="button"><span>Search</span></a> <a id="btnForward" title="Forward"
                            class="button"><span>&raquo;</span></a>
                </td>
            </tr>
        </table>
        <div id="calendar">
        </div>
    </div>

    <script type="text/javascript">
        // Variables
        $(document).ready(function () {
            // Datepicker
            $(".datepicker").datepicker({
                // minDate: '<%=DateTime.Now.ToShortDate() %>',
                onSelect: function () { }
            });

            // Data Methods
            function getData() {
                var departureDate = $("#<%=txtDepartureDate.ClientID %>").val();

                defaultParameters = "{ departureDate:'" + departureDate + "'}";
                //    Loader(true);
                loading($('#calendar'));
                $.ajax({
                    type: "POST",
                    url: "/Get.asmx/GetServiceCalendar",
                    data: defaultParameters,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: (function (data) {
                        var list = data.d;
                        $('#calendar').setTemplate($("#TemplateResultsTable").html());
                        $('#calendar').processTemplate(list.Result);

                        var dayOfWeek = list.DayOfWeeks;
                        $('#firstDay').text(dayOfWeek.FirstDay);
                        $('#secondDay').text(dayOfWeek.SecondDay);
                        $('#thirdDay').text(dayOfWeek.ThirdDay);
                        $('#fourthDay').text(dayOfWeek.FourthDay);
                        $('#fifthDay').text(dayOfWeek.FifthDay);
                        $('#sixthDay').text(dayOfWeek.SixthDay);
                        $('#seventhDay').text(dayOfWeek.SeventhDay);
                    }),
                    error: (function (XMLHttpRequest, textStatus, errorThrown) {
                        var err = eval("(" + XMLHttpRequest.responseText + ")");
                        alert(err.Message);
                    })
                });
            }

            $("#btnFind").click(function () {
                getData();
            });

            $("#btnBack").click(function () {
                stepDate(-1);
                getData();
            });

            $("#btnForward").click(function () {
                stepDate(1);
                getData();
            });

            getData();
        });

        function stepDate(i) {
            $.ajax({
                type: "POST",
                url: "ServiceCalendar.aspx/GetDate",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "{ s: '" + $("#<%=txtDepartureDate.ClientID %>").val() + "', i: " + i + " }",
                async: false,
                success: function(response) {
                    $("#<%=txtDepartureDate.ClientID %>").val(formatJSONDate(response.d));
                },
                failure: function(response) {
                    $("#<%=txtDepartureDate.ClientID %>").val('');
                    alert(response.d);
                }
            });
        }

        function loading(tag) {
            tag.empty().html('<img src="/Images/ajax-loader.gif" />');
        }
    </script>

</asp:Content>
